<template>
  <div>
    <h2>{{ counter }}</h2>
    <h2>{{ counter*2 }}</h2>
    <h2>{{ square }}</h2>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>
  </div>
</template>

<script>
  export default {  //this的指向是这个括号 vue的实力对象
    data(){
      return{
        counter:1
      }
    },
    methods:{
      add(){
        this.counter++
      },
      minus(){
        this.counter--
      }
    },
    computed:{
        square(){
          return this.counter ** 2
        }
      },
      watch:{

      },
      created(){
        console.log('created');
      }
  }
</script>

<style  scoped>

</style>